<template>
  <div id="main">
    <webf-listview id="list" @end="handleScrollAtEnd">
      <div style="display: flex; flex-direction: row; flex-wrap: wrap;">
        <view-card title="TodoMVC" :src="require('@/assets/todomvc.png')" href="/todomvc"
          desc="The TodoMVC demo built in Vue.js"></view-card>
        <view-card title="PositionedLayout" :src="require('@/assets/positioned_layout.png')" href="/positioned_layout"
          desc="CSS Positioning with Examples"></view-card>
      </div>
      <div style="display: flex; flex-direction: row; flex-wrap: wrap;">
        <view-card title="TodoMVC" :src="require('@/assets/todomvc.png')" href="/todomvc"
          desc="The TodoMVC demo built in Vue.js"></view-card>
        <view-card title="PositionedLayout" :src="require('@/assets/positioned_layout.png')" href="/positioned_layout"
          desc="CSS Positioning with Examples"></view-card>
      </div>
      <div style="display: flex; flex-direction: row; flex-wrap: wrap;" v-for="n in listAmount" :key="n">
        <view-card title="TodoMVC" :src="require('@/assets/todomvc.png')" href="/todomvc"
          desc="The TodoMVC demo built in Vue.js"></view-card>
        <view-card title="PositionedLayout" :src="require('@/assets/positioned_layout.png')" href="/positioned_layout"
          desc="CSS Positioning with Examples"></view-card>
      </div>
    </webf-listview>
  </div>

</template>

<script>
import ViewCard from '@/Components/ViewCard.vue';

export default {
  components: {
    ViewCard,
  },
  data: () => {
    return {
      show: true,
      listAmount: 1
    }
  },
  methods: {
    handleScrollAtEnd() {
      this.listAmount++;
    }
  }
}
</script>


<style scoped>
#list {
  padding: 10px 0;
  height: 100vh;
  width: 100%;
}
</style>